<script setup>
import { Edit, Delete, Search, Shop, Connection, Comment, ArrowDown, Select, CloseBold } from '@element-plus/icons-vue'
import { ref, computed, onMounted, reactive } from 'vue'
import {
    getGoodsCommentAPI,
    commentStatusChangeAPI,
    getDetailGoodsAPI,
} from '@/apis/admin'
import { useRoute } from 'vue-router';
const route = useRoute()
import router from "@/router";
import dayjs from 'dayjs'

const formatTime = (timeString) => {
    return dayjs(timeString).format('YYYY年M月D日 HH:mm:ss')
}
//-------------------------------------------查询评论------------------------------------------//
//商品列表数据模型
onMounted(() => getCommentList())

const status = ref('')//搜索时的发布状态
const commentContent = ref('')//搜索时的评论内容
const page = ref(1)//当前页//分页条数据模型
const total = ref(20)//总条数
const pageSize = ref(10)//每页条数


const commentList = ref([])
const getCommentList = async () => {
    //搜索参数
    let searchParams = ref({
        id: route.params.id,
        status: status.value,
        commentContent: commentContent.value,
        page: page.value,
        pageSize: pageSize.value
    })
    let res = await getGoodsCommentAPI(searchParams.value)

    total.value = res.data.data.counts
    // commentList.value = res.data.data.items
    commentList.value = res.data.data.items.map(item => ({
        ...item,
        // 添加展开状态字段
        isCollapsed: true
    }))
}

//清除搜索信息
const clearSearchInfo = () => {
    status.value = ''
    commentContent.value = ''
}

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
    pageSize.value = size
    getCommentList()
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
    page.value = num
    getCommentList()
}

// 创建格式化函数
const formatPayState = (payState) => {
    const stateMap = {
        1: '正常',
        0: '违规'
    }
    return stateMap[payState]
}
//-------------------------------------------编辑商品------------------------------------------//
const commentStatusChange = async (status, commentId) => {
    await commentStatusChangeAPI(status, commentId)
    getCommentList()
}

const isView = ref(false)
const viewGoodsForm = ref({
    goodsImg: '',
    goodsName: '',
    content: '',
    price: '',
    goodsNumber: '',
    shippingFee: '',
    CategoryId: '',
    categoryName: '',
    SubCategoryId: ''
})
const getDetailGoods = async () => {
    const res = await getDetailGoodsAPI(route.params.id)
    viewGoodsForm.value = res.data
}
onMounted(() => getDetailGoods())


</script>
<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>评论管理</span>
            </div>
            <el-descriptions direction="vertical" border style="margin-top: 20px">
                <el-descriptions-item :rowspan="2" :width="140" label="图片" align="center">
                    <el-image style="width: 100px; height: 100px" :src="viewGoodsForm.goodsImg" />
                </el-descriptions-item>
                <el-descriptions-item label="商品名">{{ viewGoodsForm.goodsName }}</el-descriptions-item>
                <el-descriptions-item label="分类">{{ viewGoodsForm.categoryName }}</el-descriptions-item>
                <el-descriptions-item label="价格">{{ viewGoodsForm.price }}</el-descriptions-item>
                <el-descriptions-item label="库存">{{ viewGoodsForm.goodsNumber }}</el-descriptions-item>
            </el-descriptions>
        </template>
        <!-- 搜索表单 -->
        <!-- 一级选择 -->
        <el-form inline>
            <el-form-item label="评论状态：">
                <el-select placeholder="请选择" v-model="status" style="width: 100px;">
                    <el-option label="正常" value="1"></el-option>
                    <el-option label="违规" value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-input :prefix-icon="Search" v-model="commentContent" style="width: 200px" placeholder="请输入评论内容" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getCommentList()">搜索</el-button>
                <el-button @click="clearSearchInfo()">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 评论列表 -->
        <el-table :data="commentList" style="width: 100%">
            <el-table-column label="评论人" prop="username" width="100"></el-table-column>
            <el-table-column label="评论内容" prop="content" width="500">
                <template #default="{ row }">
                    <div class="content-cell">
                        <!-- 内容容器 -->
                        <div :class="['content-text', { 'collapsed': row.isCollapsed }]">
                            {{ row.content }}
                        </div>
                        <!-- 展开/收起按钮 -->
                        <el-button v-if="row.content.length > 34" type="text" size="small"
                            @click="row.isCollapsed = !row.isCollapsed">
                            {{ row.isCollapsed ? '展开' : '收起' }}
                            <el-icon :style="{ transform: row.isCollapsed ? 'rotate(0deg)' : 'rotate(180deg)' }">
                                <ArrowDown />
                            </el-icon>
                        </el-button>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="回复人" prop="replyUsername" width="100"></el-table-column>
            <el-table-column label="点赞数量" prop="likeCount" width="100"></el-table-column>
            <el-table-column label="评论时间" prop="createTime">
                <template #default="{ row }">
                    <span>{{ formatTime(row.createTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="评论状态" prop="status" width="100">
                <template #default="{ row }">
                    <span>{{ formatPayState(row.status) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
                <template #default="{ row }">
                    <el-button :icon="CloseBold" v-if="row.status === 1" circle plain type="danger"
                        @click="commentStatusChange(0, row.id)"></el-button>
                    <el-button :icon="Select" v-else circle plain type="success"
                        @click="commentStatusChange(1, row.id)"></el-button>
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>
        <!-- 分页条 -->
        <el-pagination v-model:current-page="page" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 15]"
            layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
            @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />
    </el-card>
</template>
<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

.content-cell {
    max-width: 500px;

    .content-text {
        // 默认展开状态
        white-space: pre-line;
        word-break: break-word;
        transition: all 0.3s ease;

        //收起状态
        &.collapsed {
            display: -webkit-box;
            display: -moz-box; // 兼容老版本Firefox
            display: box; // 标准写法 (部分浏览器需要)
            -webkit-line-clamp: 1; // WebKit内核
            -moz-line-clamp: 1; // Firefox (实验性支持)
            line-clamp: 1; // 未来标准写法
            -webkit-box-orient: vertical;
            -moz-box-orient: vertical; // Firefox
            box-orient: vertical; // 标准写法
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    .el-button {
        padding-left: 0;
        margin-top: 4px;
        color: var(--el-color-primary);

        .el-icon {
            margin-left: 4px;
            transition: transform 0.3s;
        }
    }
}
</style>